<template>
  <div v-if="show">
    <div class="pop_warning">
      <div class="title">
        <span>{{ title }}</span>
      </div>
      <div class="close_btn" @click="closeEmitai"></div>
      <div class="content">
        <div class="tableBox">
          <div
            class="tableItem"
            :class="currentIndex == index ? 'tableActive' : ''"
            v-for="(item, index) of tabList"
            :key="index"
            @click="tableClick(index)"
          >
            <span>{{ item.name }}</span>
          </div>
        </div>
        <template v-if="currentIndex == 0">
          <div class="search_box">
            <div class="searchItem">
              <span>中心:</span>
              <el-input
                v-model="querySearch.name"
                placeholder="请输入中心名称"
              ></el-input>
            </div>
            <div class="searchItem">
              <span>名称: </span>
              <el-input
                v-model="querySearch.name"
                placeholder="请输入中心名称"
              ></el-input>
            </div>
            <div class="search_btns">
              <div @click="searchBtn">查询</div>
              <div @click="resetBtn">重置</div>
            </div>
          </div>
          <div class="table_box">
            <el-table :data="tableData" height="540px">
              <el-table-column prop="date" label="日期" width="180">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="address" label="地址"> </el-table-column>
            </el-table>
          </div>
        </template>
        <template v-if="currentIndex == 1">
          <div class="search_box">
            <div class="searchItem">
              <span>中心:</span>
              <el-input
                v-model="querySearch.name"
                placeholder="请输入中心名称"
              ></el-input>
            </div>
            <div class="searchItem">
              <span>名称: </span>
              <el-input
                v-model="querySearch.name"
                placeholder="请输入中心名称"
              ></el-input>
            </div>
            <div class="search_btns">
              <div @click="searchBtn">查询</div>
              <div @click="resetBtn">重置</div>
            </div>
          </div>
          <div class="table_box">
            <swiperTable
              :titles="[
                '序号',
                '作业日期',
                '作业区域',
                '作业量(亩)',
                '作业时长(小时)',
                '操作',
              ]"
              :data="tableDat2"
              :contentHeight="'540px'"
              :settled="settled"
              @operate="operate"
            />
          </div>
        </template>
        <div class="fy_page">
          <el-pagination
            background
            layout="total,prev, pager, next"
            :page-size="page.pageSize"
            :total="page.total"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import swiperTable from "@/components/common/swiperTable/index.vue";
export default {
  name: "pop1",
  components: {
    swiperTable,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "资源调度",
    },
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      currentIndex: 0,
      tabList: [{ name: "应急救灾中心" }, { name: "应急救灾服务队" }],
      querySearch: {},
      page: {
        pageSize: 8,
        pageNo: 1,
        total: 0,
      },
      tableData: [
        {
          date: "11",
          name: "333",
        },
        {
          date: "11",
          name: "333",
        },
      ],
      tableDat2: [["gb123456", "20200128 23:56:11", 3, 4, "21213"],["gb123456", "20200128 23:56:11", 3, 4, "21213"],["gb123456", "20200128 23:56:11", 3, 4, "21213"],["gb123456", "20200128 23:56:11", 3, 4, "21213"],["gb123456", "20200128 23:56:11", 3, 4, "21213"],["gb123456", "20200128 23:56:11", 3, 4, "21213"],["gb123456", "20200128 23:56:11", 3, 4, "21213"],["gb123456", "20200128 23:56:11", 3, 4, "21213"]],
    };
  },
  mounted() {},
  computed: {
    show() {
      return this.value;
    },
  },
  methods: {
    closeEmitai() {
      this.$emit("input", false);
    },
    tableClick(idx) {
      this.currentIndex = idx;
      this.resetBtn();
    },
    searchBtn() {
      this.page.pageNo = 1;
      this.getData();
    },
    resetBtn() {
      this.page.pageNo = 1;
      this.querySearch = {};
      this.getData();
    },
    handleCurrentChange(e) {
      this.page.pageNo = e;
      this.getData();
    },
    getData() {
      let params = {
        ...this.querySearch,
        pageNo: this.page.pageNo,
        pageSize: this.pageSize,
      };
    },
  },
};
</script>
<style scoped lang="less">
.pop_warning {
  width: 1153px;
  height: 850px;
  background: rgba(9, 19, 34, 0.95);
  box-shadow: 0px 0px 22px 0px rgba(11, 54, 138, 0.35),
    0px 2px 8px 0px rgba(0, 0, 0, 0.7),
    inset 0px 0px 8px 0px rgba(17, 146, 214, 0.35);
  border-radius: 11px;
  border: 1px solid #015c8c;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1100;

  .title {
    margin: 0 auto 36px;
    width: 634px;
    height: 72px;
    line-height: 72px;
    background: url(~@/assets/img/pop/title1.png) no-repeat center / 100% 100%;
    display: grid;
    place-items: center;

    span {
      display: inline-block;
      font-size: 36px;
      font-family: PangMenZhengDao;
      background: linear-gradient(180deg, #ffffff 0%, #0079ff 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .close_btn {
    position: absolute;
    width: 23px;
    height: 23px;
    top: 24px;
    right: 27px;
    background: url(~@/assets/img/pop/close1.png) no-repeat center / 100% 100%;
    cursor: pointer;
  }

  .content {
    padding: 0 30px;

    .tableBox {
      height: 41px;
      margin-bottom: 21px;

      .tableItem {
        float: left;
        width: 152px;
        height: 41px;
        background: url(~@/assets/img/pop/btn4.png) no-repeat center / 100% 100%;
        margin-right: 10px;
        font-family: PangMenZhengDao;
        font-size: 22px;
        color: #ffffff;
        line-height: 41px;
        text-align: center;
        font-style: normal;
      }

      .tableActive {
        background: url(~@/assets/img/pop/btn5.png) no-repeat center / 100% 100%;

        span {
          font-family: PangMenZhengDao;
          font-size: 22px;
          color: #ffffff;
          line-height: 41px;
          text-align: center;
          font-style: normal;
          text-transform: none;
          background: linear-gradient(180deg, #ffffff 0%, #0079ff 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }

    .search_box {
      text-align: left;
      display: flex;

      .searchItem {
        display: flex;
        align-items: center;
        margin-right: 24px;

        span {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          margin-right: 4px;
        }

        ::v-deep(.el-input) {
          width: 189px;
          height: 34px;

          .el-input__inner {
            width: 189px;
            height: 34px;
            background: linear-gradient(
                180deg,
                rgba(181, 223, 248, 0) 0%,
                rgba(29, 172, 255, 0.29) 100%,
                #ffffff 100%
              ),
              rgba(0, 74, 143, 0.4);
            border: 1px solid rgba(0, 162, 255, 0.6);
          }
        }
      }

      .report_time {
        margin-left: 26px;
        display: flex;
        align-items: center;

        span {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 22px;
        }
      }

      .istime_out {
        margin-left: 26px;
        align-items: center;
        display: flex;

        span {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 22px;
        }
      }

      .search_btns {
        margin-left: 27px;
        display: flex;
        align-items: center;

        & div {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 43px;
          background: url(~@/assets/img/pop/search_btn.png) no-repeat center /
            100% 100%;
          background-size: 100% 100%;
          text-align: center;
          cursor: pointer;

          &:first-of-type {
            width: 98px;
            height: 43px;
          }

          &:nth-of-type(2) {
            margin-left: 20px;
            width: 98px;
            height: 43px;
          }

          &:nth-of-type(3) {
            margin-left: 20px;
            width: 98px;
            height: 43px;
          }
        }
      }
    }

    // .table_box {
    //     margin-top: 10px;
    //     width: 100%;
    //     background-color: rgba(0, 0, 0, 0);

    //     ::v-deep(.el-table) {
    //         &::before {
    //             background-color: rgba(0, 0, 0, 0);
    //         }

    //         &::after {
    //             background-color: rgba(0, 0, 0, 0);
    //         }
    //     }

    //     ::v-deep(.el-table) {
    //         width: 100%;
    //         height: 100%;
    //         background-color: transparent;
    //         border-color: #2968c7;
    //         display: flex;
    //         flex-direction: column;

    //         // 表头背景颜色设置
    //         & tr {
    //             background-color: transparent !important;
    //         }

    //         // th,td样式设置
    //         th,
    //         td {
    //             text-align: center;
    //             border-color: #2968c7;
    //             color: #fff;
    //             background-color: transparent !important;
    //         }

    //         .el-table__cell {
    //             padding: 5px 0px !important;
    //         }

    //         .cell {
    //             padding: 0px !important;
    //         }

    //         .el-table__header-wrapper {
    //             border: 1px solid #2968c7;

    //             .el-table__cell.is-leaf {
    //                 border-right: 1px solid #2968c7;
    //             }
    //         }

    //         .el-table__body-wrapper {
    //             width: 100%;
    //             flex: 1;
    //             overflow-y: auto;

    //             .el-table__row {
    //                 height: 40px;

    //                 &:nth-child(odd) {
    //                     background: url('~@/assets/img/pop/bg3.png') no-repeat center / 100% 100%;
    //                 }
    //             }
    //         }
    //     }
    // }
  }
}
</style>